<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <el-main>
      <div>
        <el-carousel indicator-position="none" type="card" height="400px">
          <el-carousel-item v-for="item in items" :key="item">
            <el-image style="height: 400px" :src="item"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div>
      <div style="height: 1000px; display: flex">
        <div style="flex: 1; float: left; border-right: 1px solid lightgray">
          <el-image
            style="margin-top: 50px; width: 70%; height: 70%"
            src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/sanzhi.PNG"
          ></el-image
          ><br />
          <div style="margin-top: 60px; font-size: 25px">
            <b>选购 三只松鼠 全新每日坚果</b>
          </div>
        </div>
        <div class="rightgoods" style="flex: 1; float: left">
          <div style="border-bottom: 1px solid lightgrey">
            <el-image
              style="margin-top: 35px; width: 70%; height: 70%"
              src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/zhongqiu.jpg"
            ></el-image
            ><br />
            <div style="margin-top: 35px; font-size: 22px">
              <b>良品铺子 敦煌献礼 指定中秋礼盒</b>
            </div>
          </div>
          <div>
            <el-image
              style="margin-top: 35px; width: 70%; height: 75%"
              src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/baishi.png"
            ></el-image
            ><br />
            <div style="margin-top: 35px; font-size: 22px">
              <b>选购 百事经典蓝罐黑罐 劲爽一夏</b>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 0.8px; background-color: grey; opacity: 0.3"></div>
      <div class="parent">
        <div class="dleftgoods">
          <el-image
            style="margin-top: 15px; width: 70%; height: 75%"
            src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/qinzui.PNG"
          ></el-image
          ><br />
          <div style="margin-top: 25px; font-size: 18px">
            <b>选购 卫龙 亲嘴烧 舌尖美味</b>
          </div>
        </div>
        <div class="dmidgoods">
          <el-image
            style="margin-top: 15px; width: 70%; height: 75%"
            src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/QQ%E5%9B%BE%E7%89%8720201006104441.png"
          ></el-image
          ><br />
          <div style="margin-top: 25px; font-size: 18px">
            <b>选购 德芙 奈雪の茶 联名奶茶 </b>
          </div>
        </div>
        <div class="drightgoods">
          <el-image
            style="margin-top: 15px; width: 70%; height: 75%"
            src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/tls.png"
          ></el-image
          ><br />
          <div style="margin-top: 25px; font-size: 18px">
            <b>选购 蒙牛 特仑苏 源自专属牧场 </b>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer>
      <div style="margin-left: 30px">优坊</div>
      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div>
    </el-footer>
  </el-container>
</template>

<script>

import Header from "@/views/Header.vue"
export default {
  components:{Header},
  data() {
    return {
      items: [
        "https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/lunbo3.jpg",
        "https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/lunbo4.jpg",
        "https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/lunbo1.png",
        "https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/lunbo2.jpg",
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.leftgoods {
  border-right: 1px solid gainsboro;
}
.dleftgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.dmidgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.drightgoods {
  float: left;
  flex: 1;
}
.parent {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent > div {
  background-color: white;
}
.rightgoods > div {
  height: 50%;
}
</style>
